<template>

	<el-card class="nopadding" shadow="never" header="操作日志">
		<el-container>
			<el-header class="header-search">
				<search-header
					:search-form="searchForm"
					:search-items="searchItems"
					:expand="expand"
					:fc-table-ref="fcTableRef"
					@expand="expand = $event"
				/>
			</el-header>
			<el-main class="nopadding">
				<fc-table ref="fcTableRef" :indent="20" :requestApi="getUserLoggerApi" :columns="columns"
				          :initParam="{ pageSize:15}">
					<template #options="scope">
						<el-button type="primary" icon="View" link @click="detailClick(scope.row)">详情</el-button>
					</template>
				</fc-table>
			</el-main>
			<el-drawer v-model="formViewVisible" :size="600" :with-header="false" destroy-on-close>
				<logger-detail-view v-model="formViewVisible" :loggerID="selectLoggerID"></logger-detail-view>
			</el-drawer>
		</el-container>
	</el-card>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, computed} from "vue";
import {ColumnProps, FcTableInstance} from "@/components/fcTable/model"
import {getUserLoggerApi} from "@/api/modules/auth.ts";
import {getLoggerFilterApi} from "@/api/modules/setting.ts";
import {FilterModel} from "@/models/filterModel.ts";
import {LoggerModel} from "@/models/settingModel.ts";
import LoggerDetailView from "@/views/userinfo/components/loggerDetail.vue";
import SearchInput from '@/components/lcSearch/input.vue'
import SearchSelect from '@/components/lcSearch/select.vue'
import SearchDateRange from '@/components/lcSearch/dateRange.vue'
import SearchHeader from '@/components/lcSearch/header.vue'

const fcTableRef = ref<FcTableInstance | null>(null);
const expand = ref(false);

const filter = reactive<FilterModel>({
	type: [],
});
const loadFilters = async () => {
	const filterData = await getLoggerFilterApi();
	filter.type = Object.entries(filterData.data.data.type || {}).map(
		([key, label]) => ({key, label})
	);
};
// 搜索表单
const searchForm = reactive<Record<string, any>>({
	model: null,
	type: null,
	created_at: null,
})
// 搜索参数
const searchItems = computed(() => [
	{component: SearchInput, model: 'model', props: {label: '数据模型', placeholder: '请输入数据模型'}},
	{
		component: SearchSelect,
		model: 'type',
		props: {label: '事件类型', placeholder: '请选择事件类型', options: filter.type}
	},
	{component: SearchDateRange, model: 'created_at', props: {label: '操作时间'}},
]);
// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
	{prop: "id", label: "序号", width: 80},
	{prop: "ip", label: "IP", width: 180},
	{prop: "type", label: "事件类型", width: 180},
	{prop: "model", label: "数据模型"},
	{prop: "created_at", label: "操作时间", width: 200},
	{prop: "options", label: "操作", width: 180, fixed: "right"},
]);
const selectLoggerID = ref(0);
const formViewVisible = ref(false);
// 操作日志详情
const detailClick = (row: LoggerModel) => {
	selectLoggerID.value = row.id;
	formViewVisible.value = true;
}
onMounted(() => {
	loadFilters();
});
</script>
<style lang="scss" scoped>
.ellipsis-cell {
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>
